<script setup lang="ts">
import { getUserInfoById } from '@/api/user';
import { User } from '@/api/user/type';
import { router } from '@/router';
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';

const receiver = ref({} as User);

onMounted(() => {
    const route = useRoute();
    const receiverId = route.query.receiverId as string;
    getUserInfoById(receiverId).then((res) => {
        receiver.value = res.data as User;
    })
})

const back = () => {
    router.back();
}

</script>

<template>
    <div class="container-icon">
        <div class="content">
            <div class="icon">
                <van-icon @click="back" name="arrow-left" size="32" />
            </div>
            <div class="center">
                <p style="margin: 0%; font-size: 17px;">{{ receiver.nickname }}</p>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.container-icon {
    height: 50px;
    .content {
        height: 100%;
        display: flex;
        background-color: white;
        flex-direction: row;
        align-items: center;
        border-bottom: 1px rgba(0, 0, 0, 0.13) solid;
        width: 100%;
        position: relative; /* 为子元素的绝对定位提供参考 */
        .icon {
            position: absolute; /* 绝对定位 */
            left: 16px; /* 距离左侧 16px */
            display: flex;
            align-items: center;
        }
        .center {
            display: flex;
            width: 100%;
            justify-content: center;
            align-items: center;
        }
    }
}
</style>